<template>
  <div class="tag-item">
    <el-input
      v-model="input"
      placeholder="请输入内容"
      v-if="showInput"
      @change="hideInput"
      style="width: 50%; backgound-color: rgba(255, 255, 255, 0)"
      class="hhh"
    ></el-input>
    <div v-else @click="mshowInput">{{ input }}</div>
  </div>
</template>

<script>
export default {
  name: "myinput",
  data() {
    return {
      showInput: true,
      input: "",
    };
  },
  props: {
    number: {
      type: Number,
      default: "",
    },
  },
  methods: {
    hideInput() {
      if (this.input != "") {
        this.showInput = false;
        let data = {
          input: this.input,
          number: this.number,
        };
        this.$emit("changeInput", data);
      }
    },
    mshowInput() {
      this.showInput = true;
    },
  },
};
</script>

<style scoped>
.tag-item {
  width: 100%;
  height: 48px;
  line-height: 48px;
}
.hhh {
  background-color: rgba(255, 255, 255, 0) !important;
}
</style>
